<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="css/注册.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"> <!-- 加载远程 字体图标 -->
</head>

<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
    <div class="wrapper">
        <!-- 顶部导航 -->
        <ul class="xtx_navs">
            <li>
                <a href="登录.html">请先登录</a>
            </li>
            <li>
                <a href="./注册.html">免费注册</a>
            </li>
            <li>
                <a href="./center-order.html">我的订单</a>
            </li>
            <li>
                <a href="./center.html">会员中心</a>
            </li>
            <li>
                <a href="javascript:;">帮助中心</a>
            </li>
            <li>
                <a href="javascript:;">在线客服</a>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="mobile sprites"></i>
                    手机版
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 头部 -->
<div class="xtx_header">
    <div class="wrapper">
        <!-- 网站Logo -->
        <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
        <!-- 主导航 -->
        <div class="xtx_navs">
            <ul class="clearfix">
                <li>
                    <a href="首页.html">首页</a>
                </li>
                <li>
                    <a href="./category01.html">生鲜</a>
                </li>
                <li>
                    <a href="./category01.html">美食</a>
                </li>
                <li>
                    <a href="./category01.html">餐厨</a>
                </li>
                <li>
                    <a href="./category01.html">电器</a>
                </li>
                <li>
                    <a href="./category01.html">居家</a>
                </li>
                <li>
                    <a href="./category01.html">洗护</a>
                </li>
                <li>
                    <a href="./category01.html">孕婴</a>
                </li>
                <li>
                    <a href="./category01.html">服装</a>
                </li>
            </ul>
        </div>
        <!-- 站内搜索 -->
        <div class="xtx_search clearfix">
            <!-- 购物车 -->
            <a href="./cart-none.html" class="xtx_search_cart sprites">
                <i>2</i>
            </a>
            <!-- 搜索框 -->
            <div class="xtx_search_wrapper">
                <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
            </div>
        </div>
    </div>
</div>
<div class="xtx-wrapper">
    <div class="container">
        <!-- 卡片 -->
        <div class="xtx-card">
            <h3>新用户注册</h3>
            <form class="xtx-form">
                <div data-prop="username" class="xtx-form-item">
                    <span class="iconfont icon-zhanghao"></span>
                    <input name="设置用户名称" type="text" placeholder="设置用户名称">
                    <span class="提示信息"></span>
                </div>
                <div data-prop="phone" class="xtx-form-item">
                    <span class="iconfont icon-shouji"></span>
                    <input name="输入手机号码" type="text" placeholder="输入手机号码  ">
                    <span class="提示信息"></span>
                </div>
                <div data-prop="code" class="xtx-form-item">
                    <span class="iconfont icon-zhibiaozhushibiaozhu"></span>
                    <input name="短信验证码" type="text" placeholder="短信验证码">
                    <span class="提示信息"></span>
                    <a class="发送验证码" href="javascript:;">发送验证码</a>
                </div>
                <div data-prop="password" class="xtx-form-item">
                    <span class="iconfont icon-suo"></span>
                    <input name="密码设置" type="password" placeholder="设置6至20位字母、数字和符号组合">
                    <span class="提示信息"></span>
                </div>
                <div data-prop="confirm" class="xtx-form-item">
                    <span class="iconfont icon-suo"></span>
                    <input name="第二次密码确认" type="password" placeholder="请再次输入上面密码">
                    <span class="提示信息"></span>
                </div>
                <div class="xtx-form-item 勾选用户同意">
                    <i class="iconfont icon-queren"></i> <!-- 这里使用字体图标,代替复选框. 模拟勾选和取消 -->
                    已阅读并同意<i>《用户服务协议》</i>
                </div>
                <div class="xtx-form-item">
                    <button class="提交">下一步</button>
                    <!-- <a class="submit" href="javascript:;">下一步</a> -->
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
    <div class="wrapper">
        <!-- 联系我们 -->
        <div class="contact clearfix">
            <dl>
                <dt>客户服务</dt>
                <dd class="chat">在线客服</dd>
                <dd class="feedback">问题反馈</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd class="weixin">公众号</dd>
                <dd class="weibo">微博</dd>
            </dl>
            <dl>
                <dt>下载APP</dt>
                <dd class="qrcode">
                    <img src="./uploads/qrcode.jpg">
                </dd>
                <dd class="download">
                    <span>扫描二维码</span>
                    <span>立马下载APP</span>
                    <a href="javascript:;">下载页面</a>
                </dd>
            </dl>
            <dl>
                <dt>服务热线</dt>
                <dd class="hotline">
                    400-0000-000
                    <small>周一至周日 8:00-18:00</small>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
        <div class="wrapper">
            <!-- 口号 -->
            <div class="slogan">
                <a href="javascript:;" class="price">价格亲民</a>
                <a href="javascript:;" class="express">物流快捷</a>
                <a href="javascript:;" class="quality">品质新鲜</a>
            </div>
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜儿</p>
            </div>
        </div>
    </div>
</div>


<script>
    // -------- 获取验证码 模块 ----------
    const 验证码 = document.querySelector('.发送验证码') // 获取DOM元素
    let 节流阀 = true // 目的是,约束不能频繁点击
    // 监控 鼠标点击事件, 这里是点击会有倒计时效果
    验证码.addEventListener('click', function () {
        let 秒数 = 6
        if (节流阀) {
            节流阀 = false // 关闭, 不能第2次点击

            // 定时器
            let 定时器序号 = setInterval(function () {
                秒数--
                验证码.innerHTML = `${秒数}重新获取`

                // 满足秒数归0,关闭定时器
                if (秒数 === 0) {
                    clearInterval(定时器序号) // 关闭定时器
                    验证码.innerHTML = `发送验证码` // 重新恢复原来的文本内容
                    节流阀 = true // 打开, 可以在点击
                }
            }, 1000)
        }
    })


    // -------- 用户名验证 模块 ----------
    const 设置用户名称 = document.querySelector('[name="设置用户名称"]') // 获取DOM元素
    function 用户名正则验证() {
        // 定义 正则验证 规则
        const 用户名验证 = /^[a-zA-Z0-9-_]{6,10}$/
        // 创建节点,方便修改对应标签的内容
        const 用户名_提示信息 = 设置用户名称.nextElementSibling // 下一个兄弟节点

        // 验证输入的用户名, ! 是取反,验证是假,执行if
        if (!用户名验证.test(设置用户名称.value)) {
            // 修改 节点对应的标签,文本内容
            用户名_提示信息.innerHTML = '输入错误,请输入6-10位用户名'
            // 函数返回 布尔值, 是为了最后的提交按钮做准备
            return false // 执行了if,返回 假
        }

        // 清空 节点对应的标签,文本内容
        用户名_提示信息.innerHTML = ''
        // 函数返回 布尔值, 是为了最后的提交按钮做准备
        return true // 没有执行if, 返回 真
    }
    // 监控 内容改变事件
    设置用户名称.addEventListener('change', 用户名正则验证)


    // -------- 手机号验证 模块 ----------
    const 输入手机号码 = document.querySelector('[name="输入手机号码"]') // 获取DOM元素
    function 手机号正则验证() {
        // 定义 正则验证 规则
        const 手机号验证 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
        // 创建节点,方便修改对应标签的内容
        const 手机号码_提示信息 = 输入手机号码.nextElementSibling // 下一个兄弟节点

        // 验证输入的手机号, ! 是取反,验证是假,执行if
        if (!手机号验证.test(输入手机号码.value)) {
            // 修改 节点对应的标签,文本内容
            手机号码_提示信息.innerHTML = '输入错误,请输入11位手机号'
            // 函数返回 布尔值, 是为了最后的提交按钮做准备
            return false // 执行了if,返回 假
        }

        // 清空 节点对应的标签,文本内容
        手机号码_提示信息.innerHTML = ''
        // 函数返回 布尔值, 是为了最后的提交按钮做准备
        return true // 没有执行if, 返回 真
    }
    // 监控 内容改变事件
    输入手机号码.addEventListener('change', 手机号正则验证)


    // -------- 验证码验证 模块 ----------
    const 短信验证码 = document.querySelector('[name="短信验证码"]') // 获取DOM元素
    function 验证码正则验证() {
        // 定义 正则验证 规则
        const 验证码验证 = /^\d{6}$/
        // 创建节点,方便修改对应标签的内容
        const 验证码_提示信息 = 短信验证码.nextElementSibling // 下一个兄弟节点

        // 验证输入的验证码, ! 是取反,验证是假,执行if
        if (!验证码验证.test(短信验证码.value)) {
            // 修改 节点对应的标签,文本内容
            验证码_提示信息.innerHTML = '输入错误,请输入6位验证码'
            // 函数返回 布尔值, 是为了最后的提交按钮做准备
            return false // 执行了if,返回 假
        }

        // 清空 节点对应的标签,文本内容
        验证码_提示信息.innerHTML = ''
        // 函数返回 布尔值, 是为了最后的提交按钮做准备
        return true // 没有执行if, 返回 真
    }
    // 监控 内容改变事件
    短信验证码.addEventListener('change', 验证码正则验证)


    // -------- 密码验证 模块 ----------
    const 密码设置 = document.querySelector('[name="密码设置"]') // 获取DOM元素
    function 密码正则验证() {
        // 定义 正则验证 规则
        const 密码验证 = /^[a-zA-Z0-9-_]{6,20}$/
        // 创建节点,方便修改对应标签的内容
        const 密码设置_提示信息 = 密码设置.nextElementSibling // 下一个兄弟节点

        // 验证输入的密码, ! 是取反,验证是假,执行if
        if (!密码验证.test(密码设置.value)) {
            // 修改 节点对应的标签,文本内容
            密码设置_提示信息.innerHTML = '输入错误,请输入6-20位密码'
            // 函数返回 布尔值, 是为了最后的提交按钮做准备
            return false // 执行了if,返回 假
        }

        // 清空 节点对应的标签,文本内容
        密码设置_提示信息.innerHTML = ''
        // 函数返回 布尔值, 是为了最后的提交按钮做准备
        return true // 没有执行if, 返回 真
    }
    // 监控 内容改变事件
    密码设置.addEventListener('change', 密码正则验证)


    // -------- 第二次密码验证 模块 ----------
    const 第二次密码确认 = document.querySelector('[name="第二次密码确认"]') // 获取DOM元素
    function 第二次密码验证() {
        // 创建节点,方便修改对应标签的内容
        const 第二次密码验证_提示信息 = 第二次密码确认.nextElementSibling // 下一个兄弟节点

        // 验证输入的两次密码,是否相同.  不相同执行if
        if (第二次密码确认.value !== 密码设置.value) {
            // 修改 节点对应的标签,文本内容
            第二次密码验证_提示信息.innerHTML = '密码输入不一致'
            // 函数返回 布尔值, 是为了最后的提交按钮做准备
            return false // 执行了if,返回 假
        }

        // 清空 节点对应的标签,文本内容
        第二次密码验证_提示信息.innerHTML = ''
        // 函数返回 布尔值, 是为了最后的提交按钮做准备
        return true // 没有执行if, 返回 真
    }
    // 监控 内容改变事件
    第二次密码确认.addEventListener('change', 第二次密码验证)


    // ------------- 用户协议同意 模块 -----------
    const 字体图标 = document.querySelector('.勾选用户同意 .icon-queren') // 获取DOM元素
    // 监控 点击事件, 修改每次点击 添加或删除 CSS类
    字体图标.addEventListener('click', function () {
        // toggle切换CSS类, 检查原来有类 就删除, 原来没有的类就添加
        字体图标.classList.toggle('icon-queren2') // 这里类是 字体图标
    })


    // ------------- 注册表单提交 模块 -----------
    const 下一步按钮 = document.querySelector('.提交') // 获取DOM元素
    const form标签 = document.querySelector('form') // 获取DOM元素

    // 额外说明: 所有 文本框和提交按钮, 都在 form 标签里,所以我们对这个标签 作监控

    // 提交模块是验证,用户协议是否勾选,所有的表单填写是否正确
    // 监控 表单提交
    form标签.addEventListener('submit', function (事件对象) {
        // 验证用户协议是否勾选
        // classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
        if (!字体图标.classList.contains('icon-queren2')) { // 有 icon-queren2 这个类,加上勾选了
            // ! 取反, 这里效果没有勾选 提示勾选
            alert('请勾选用户协议')
            // 阻止默认提交
            事件对象.preventDefault()
        }

        // 验证所有的文本框内容,是否符合要求
        // 前面验证各文本框内容时,都封装了函数, 我们通过函数返回值,来控制 提交事件
        // 检查每一个函数的返回值, 有一个不通过就阻止 提交.  ! 是取反
        if (!(用户名正则验证() && 手机号正则验证() && 用户名正则验证() && 密码正则验证() && 第二次密码验证())) {
            alert('请检查信息是否输入正确')
            // 阻止默认提交
            事件对象.preventDefault()
        }
    })


</script>


</body>

</html>